<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>CCRM管理平台</title>
    <link rel="stylesheet" href="../styles/dpl-min.css" />
    <link rel="stylesheet" href="../styles/bui-min.css" />
    <link rel="stylesheet" href="../styles/main.css" />
</head>
<body>
<!--列表页-->
<div class="container">
    <form id="searchForm" class="form-panel">
        <ul class="panel-content">
            <li>
                <span>
                    <label>客户id：</label><input type="text" class="control-text" name="serviceMessage.user_id"/>
                </span>
                <span>
                    <label>客户手机：</label><input type="text" class="control-text" name="mobile"/>
                </span>
                <span>
                    <label>留言内容：</label><input type="text" class="control-text" name="serviceMessage.message"/>
                </span>
                <span>
                    <label>留言类型：</label>
                    <select name="serviceMessage.type">
                        <option value="">全部</option>
                        <option value="1">分享码问题</option>
                        <option value="9">其它</option>
                    </select>
                    <span>
                        <label>状态：</label>
                        <select name="serviceMessage.status">
                            <option value="">全部</option>
                            <option value="0">未处理</option>
                            <option value="1">已回复</option>
                        </select>
                    </span>
                </span>
                <span>
                    <label>客服id：</label><input type="text" class="control-text" name="serviceMessage.account_id">
                </span>
                <button type="button" id="btnSearch" class="button button-primary">搜索</button>
            </li>
            <li>
                <span>
                    <label class="span2">留言时间：</label>
                    <div class="bui-form-group" data-rules="{dateRange : true}">
                        <input name="start_time" data-tip="{text : '起始日期'}" class="input-small calendar calendar-time" type="text"><label>&nbsp;-&nbsp;</label>
                        <input name="end_time"  class="input-small calendar calendar-time" type="text">
                    </div>
                </span>
            </li>
        </ul>
    </form>
    <div class="search-grid-container">
        <div id="grid"></div>
    </div>
</div>

<!--表单页-->
<div id="ModelFormDialog" style="display: none">
    <form id="ModelForm" class="form-horizontal">
        <div class="control-group">
            <label class="control-label">类型：</label>
            <div class="controls">
                <select name="serviceMessage.type" disabled>
                    <option value="1">分享码问题</option>
                    <option value="9">其它</option>
                </select>
            </div>
        </div>
        <div class="control-group">
            <label class="control-label">状态：</label>
            <div class="controls">
                <select name="serviceMessage.status" disabled>
                    <option value="0">未处理</option>
                    <option value="1">已回复</option>
                </select>
            </div>
        </div>
        <div class="control-group">
            <label class="control-label">内容：</label>
            <div class="controls control-row4">
                <textarea class="input-large "   name="serviceMessage.message"></textarea>
            </div>
        </div>
        <div class="control-group" style="margin-bottom: 20px">
            <label class="control-label">回复：</label>
            <div class="controls control-row5">
                <textarea class="input-large " id="reply" name="serviceMessage.reply" type="text"></textarea>
            </div>
        </div>
        <div class="row form-actions actions-bar">
            <div class="span13 offset3 ">
                <button type="submit" class="button button-primary">保存</button>
                <button type="reset" class="button">重置</button>
            </div>
        </div>
    </form>
</div>

<script type="text/javascript" src="../scripts/jquery/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="../scripts/bui.js"></script>
<script type="text/javascript" src="../scripts/common/search.js"></script>
<script type="text/javascript">
    var URI = "../clmp/serviceMessage", MODULE='serviceMessage';
    BUI.use(['common/search', 'bui/overlay', 'bui/form'], function (Search, Overlay, Form) {
        var columns = [
            {title: 'id', dataIndex: 'id', width: '10%'},
            {title: '客户id', dataIndex: 'user_id', width: '10%'},
            {title: '客户手机', dataIndex: 'mobile', width: '10%'},
            {title: '留言内容', dataIndex: 'message', width: '10%'},
            {title: '留言类型', dataIndex: 'type', width: '10%', renderer: function(val){
                switch (val){
                    case 1: return "分享码";
                    case 9: return "其它";
                }
            }},
            {title: '状态', dataIndex: 'status', width: '10%', renderer: function(val){
                switch (val){
                    case 0: return "未处理";
                    case 1: return "已回复";
                }
            }},
            {title: '留言时间', dataIndex: 'create_time', width: '10%'},
            {title: '回复人id', dataIndex: 'account_id', width: '10%'},
            {title: '回复内容', dataIndex: 'reply', width: '10%'},
            {title: '回复时间', dataIndex: 'reply_time', width: '10%'},
            {title: '操作', dataIndex: '', width: '8%', renderer: function (value, obj) {
                if(obj.status == 0){
                    return '<shiro:hasPermission name="/clmp/serviceMessage/*:post"><span class="grid-command btn-edit" title="回复">回复</span></shiro:hasPermission>';
                }
                return '';
            }}
        ];
        var store = Search.createStore(URI, {totalProperty: 'total'});
        var gridCfg = Search.createGridCfg(columns, {
            emptyDataTpl : '<div style="padding: 20px" class="centered"><img src="../img/nodata.png"><h2>好像还没有数据</h2></div>'
        });
        var search = new Search({
            store: store,
            gridCfg: gridCfg
        });
        var grid = search.get('grid');

        //监听事件，删除一条记录
        grid.on('cellclick', function (ev) {
            var sender = $(ev.domTarget); //点击的Dom
            if (sender.hasClass('btn-edit')) {
                edit(ev.record);
            }
        });

        function edit(record) {
            modelFormObject.clearFields();
            modelFormObject.set('action', URI + "/" + record.id);
            modelFormObject.set('method', "POST");
            for (var name in record) {
                modelFormObject.setFieldValue(MODULE+'.' + name, record[name]);
            }
            modelFormDialog.show();
        }

        var modelFormDialog = new Overlay.Dialog({
            title: '回复',
            width: 600,
            height: 450,
            mask: false,
            buttons: [],
            contentId: 'ModelFormDialog'
        });

        var modelFormObject = new Form.HForm({
            srcNode: '#ModelForm',
            submitType: 'ajax',
            callback: function (data) {
                if (data.status === 1) {
                    BUI.Message.Alert('操作成功');
                    modelFormDialog.hide();
                    search.load();
                } else {
                    BUI.Message.Alert('操作失败:' + data.msg);
                }
            }
        }).render();
    });
</script>
</body>
</html>